<template>
  <view class="cart-container">
    <!-- 购物车商品列表 -->
    <view class="order-list">
      <view
        class="order-item"
        v-for="(item, index) in filteredItems"
        :key="item.id"
        :class="`slide-in-${index % 2 === 0 ? 'left' : 'right'}`"
      >
        <view class="order-card">
          <view class="order-image">
            <image
              :src="item.image"
              mode="aspectFill"
              lazy-load
              style="width: 80rpx; height: 80rpx; border-radius: 8rpx;"
            />
          </view>
          <view class="order-content">
            <text class="order-title" style="font-size: 28rpx; color: #333; margin-bottom: 10rpx;">
              {{ item.title }}
            </text>
            <view class="price-info" style="display: flex; align-items: center;">
              <text class="main-price" style="font-size: 24rpx; color: #ff4500; margin-right: 10rpx;">
                ￥{{ item.price }}
              </text>
              <text class="sub-text" style="font-size: 20rpx; color: #666;">
                ×{{ item.quantity }}
              </text>
            </view>
            <!-- 数量增减按钮 -->
            <view class="quantity-control" style="margin-top: 15rpx; display: flex; align-items: center;">
              <button
                @click="decrementQuantity(index)"
                style="width: 40rpx; height: 40rpx; border: 1rpx solid #f5f5f5; border-radius: 4rpx; display: flex; justify-content: center; align-items: center;"
              >
                -
              </button>
              <span style="margin: 0 10rpx; font-size: 24rpx; color: #333;">{{ item.quantity }}</span>
              <button
                @click="incrementQuantity(index)"
                style="width: 40rpx; height: 40rpx; border: 1rpx solid #f5f5f5; border-radius: 4rpx; display: flex; justify-content: center; align-items: center;"
              >
                +
              </button>
            </view>
          </view>
          <view class="order-status" style="font-size: 20rpx; color: #666;">
            {{ item.state }}
          </view>
        </view>
      </view>

      <!-- 空状态提示 -->
      <view v-if="filteredItems.length === 0" class="empty-state">
        <text class="empty-text" style="font-size: 24rpx; color: #999;">暂无相关订单</text>
      </view>
    </view>

    <!-- 结算栏（适配 UniApp 布局） -->
    <view class="checkout-bar">
      <text class="total-price" style="font-size: 28rpx; font-weight: bold; color: #333;">
        合计：￥{{ totalPrice.toFixed(2) }}
      </text>
      <button
        class="checkout-btn"
        type="primary"
        style="padding: 12rpx 10rpx; font-size: 24rpx; border-radius: 24rpx; background-color: #ff4500; color: white; border: none;"
      >
        去结算
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 标签配置
const tabs = ref([
  { label: '全部', value: 'all' },
  { label: '待付款', value: '待付款' },
  { label: '待发货', value: '待发货' },
  { label: '已完成', value: '已完成' },
]);

// 当前选中标签
const currentTab = ref('all');

// 购物车数据
const cartItems = ref([
  { id: 1, title: '裹蒸粽（蛋黄肉粽）', price: 32.00, quantity: 8, image: 'https://img.alicdn.com/bao/uploaded/i1/2200667102488/O1CN01vVMHMt1UFYGH5MI4J_!!0-item_pic.jpg_500x500q90.jpg'},
  { id: 2, title: '经典裹蒸粽（豆沙粽）', price: 25.00, quantity: 1, image: 'https://img.alicdn.com/bao/uploaded/i4/2485526940/O1CN01jZekDa218ZRBoNyyB_!!0-item_pic.jpg' },
  { id: 3, title: '裹蒸粽（碱水粽）', price: 20.00, quantity: 4, image: 'https://img.alicdn.com/i3/2206460867747/O1CN01UK4MiC276B2Xz85qJ_!!2206460867747.jpg'},
  { id: 4, title: '裹蒸粽（八宝粽）', price: 35.00, quantity: 12, image: 'https://pic.nximg.cn/file/20220104/9852054_164240977100_2.jpg'},
  { id: 5, title: '经典裹蒸粽（豆沙粽）', price: 25.00, quantity: 6, image: 'https://img.alicdn.com/bao/uploaded/i4/2485526940/O1CN01jZekDa218ZRBoNyyB_!!0-item_pic.jpg'},
]);

// 过滤后的订单列表
const filteredItems = computed(() => {
  if (currentTab.value === 'all') return cartItems.value;
  return cartItems.value.filter(item => item.state === currentTab.value);
});

// 计算总价
const totalPrice = computed(() => {
  return cartItems.value.reduce((acc, item) => acc + item.price * item.quantity, 0);
});

// 数量增减方法
const decrementQuantity = (index) => {
  if (cartItems.value[index].quantity > 1) {
    cartItems.value[index].quantity--;
  }
};

const incrementQuantity = (index) => {
  cartItems.value[index].quantity++;
};
</script>

<style scoped>
.cart-container {
  padding: 40rpx;
  background-color: #f5f5f5;
}

.tab-bar {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 40rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
}

.tab-item {
  padding: 15rpx 0;
  font-size: 24rpx;
  color: #666;
  border-bottom: 3rpx solid transparent;
}

.tab-item.active {
  color: #ff4500;
  border-color: #ff4500;
}

.order-list {
  gap: 50rpx; 
}
.order-item {
  display: flex;
  align-items: center;
  gap: 30rpx;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
   margin-bottom: 40rpx; 
}

.order-item:last-child {
  margin-bottom: 120rpx;
}

.order-card {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.order-content {
  flex: 1;
  margin-left: 20rpx;
  padding-top: 15rpx;
}

.checkout-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 20rpx;
  background-color: #fff;
  border-top: 1rpx solid #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}

.slide-in-left {
  animation: slideInLeft 0.3s ease-in-out;
}

.slide-in-right {
  animation: slideInRight 0.3s ease-in-out;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100rpx);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100rpx);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
</style>